<!--  -->
<template>
  <div class="boxRight">
    <el-page-header @back="goBack" content="详情页面" class="el-page-header">
    </el-page-header>
    <div class="toolbar">
      <el-button primary="mini">查看</el-button>
    </div>
    <div class="tableContent">
      <i-table v-bind='table' @handleSelectionChange="handleSelectionChange">
        <template slot="edit">
          <el-button>编辑1</el-button>
        </template>
      </i-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: [{
        date: '1665544740879',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        sex: '男'
      },
      {
        date: '1665544740879',
        name: '王虎',
        address: '上海市普陀区金沙江路 1518 弄',
        sex: '男'
      }],
      table:{
        // element-ui中对table属性的设置
        tableTitle: {
          stripe: false, // 是否设置为斑马纹
          highlightCurrentRow: true, // 是否要高亮当前行
          border: true // 是否显示纵行边框
        },
        // 表格列字段
        column:[
          {
            prop: 'date', label: '日期', width: '150px',
            display: { type: 'date', param: 'YYYY-MM-DD' }
          },
          {
            prop: 'name', label: '名字', width: '150px'
          },
          {
            prop: 'address', label: '地址', width: '250px'
          },
          {
            prop: 'sex', 
            label: '性别', 
            width: '150px',
          },
          {
            prop: 'sex', label: '性别', width: '150px'
          },
          {
            prop: 'sex', label: '性别', width: '150px'
          },
          {
            prop: 'sex', label: '性别', width: '150px'
          },
          {
            prop: 'sex', label: '性别', width: '150px'
          }
        ],
        // 操作
        operator: [
          {
            'text': '获取',
            on: {
              click: (row, col, cellValue) => {
                console.log('获取-row=', row)
                console.log('获取-scope=', col)
                console.log('获取-cellValue=', cellValue)
                return this.getInfo(row)
              }
            }
          },
          {
            'text': '删除',
            on: {
              click: (row, col, cellValue) => {
                console.log('删除-row=', row)
                return this.delInfo(row)
              }
            }
          },
          {
            'text': '修改',
            on: {
              click: (row, col, cellValue) => {
                console.log('修改-row=', row)
                return this.editInfo(row)
              }
            }
          }
        ],
        dataForm:[]
      }
    };
  },

  components: {},
  created() {
    this.table.dataForm = this.formData
  },
  computed: {},

  methods: {
    goBack() {
      console.log("go back");
      let a = [1,2,4,3]
      // let a = {
      //   name:'1',
      //   age:'2'
      // }
      for(let i in a){
        console.log('i=',a[i]);
      }
      // this.$router.go(-1)
    },
    getInfo(val) {
        // 触发父方法
        console.log("获取详情",val)
      },
      delInfo(val) {
        // 触发父方法
        console.log("删除信息",val)
      },
      editInfo(val) {
        // 触发父方法
        console.log("编辑信息",val)
      },
    /**
     * 监听选择器所选表格
     * @param {*} val 
     */
    handleSelectionChange(val){
      console.log('监听选择：',val)
    }
  }
};
</script>
<style lang="less" scoped>
.el-page-header {
  line-height: 30px;
}
.boxRight{
  width:1000px
}
.tableContent{
  width:100%
}
</style>
